<!DOCTYPE html>
<html lang="en">
<head>

	<!-- start: Meta -->
	<meta charset="utf-8">
	<title>GraphDb</title> 
	<meta name="description" content="Essentia Responsive Bootstrap Theme by Bootstrap Master"/>
	<meta name="keywords" content="Template, Theme, web, html5, css3, Bootstrap" />
	<meta name="author" content="Łukasz Holeczek from creativeLabs"/>
	<!-- end: Meta -->
	
	<!-- start: Mobile Specific -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- end: Mobile Specific -->
	
	<!-- start: CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
	
	<!--  Les styles pour la carte -->
	<link href="css/style_carte.css" rel="stylesheet">
	<link href="css/bootstrap.spacelab.min.css" rel="stylesheet">
	<!-- end: CSS -->
	
	<link href="css/style.css" rel="stylesheet">
	<link href="css/slider1.css" rel="stylesheet">
	<link href="css/slider2.css" rel="stylesheet">
	<link href="css/slider3.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Economica:700,400italic">
	
	<script src="http://d3js.org/d3.v3.min.js"></script> <!-- Pour la représentation graphique -->
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<!-- <script src="http://maps.googleapis.com/maps/api/geocode/json?sensor=false"></script>-->

</head>
<body>
	
	<!--start: Header -->
	<header>
		
		<!--start: Container -->
		<div class="container" style="margin-left:auto; margin-right:auto;">
						
			<!--start: Row -->
			<div class="row-fluid">
					
				<!--start: Navigation -->
				<div class="navigation"> 
				
					<div class="navbar navbar-fixed-top">
						<div class="navbar-inner">
							<a class="btn btn-navbar btnOverlay" data-toggle="collapse" data-target=".nav-collapse">
			 					menu
					 		</a>
					 		<div class="nav-collapse collapse">
								<ul class="nav">
									<li><a href="#" class="home">Accueil</a></li>
									<li><a href="#" class="services">Localisation géographique</a></li>
									<li><a href="#" class="pricing">Filtres de recherche</a></li>
									<li><a href="#" class="portfolio">Représentation graphique</a></li>
									<li><a href="#" class="about">Dates clés</a></li>
						 		</ul>
							</div>
						</div>
					</div>
				
				
				</div>	
				<!--end: Navigation -->	
				
			</div>
			<!--end: Row -->
			
		</div>
		<!--end: Container-->
		
	</header>
	<!--end: Header-->
	<!-- start: 1st Page - Accueil -->
	<div id="home" class="hauteurDiv">
	
		<div class="demo-1">
			<!-- Slide qui permet de couper un 2 l'écran et d'appliquer divers effets
			Les classes "sl-slider-wrapper", "sl-slider", "sl-slide", "sl-slide", "sl-slide-inner" sont nécessaires
			pour fonctionner. Le premier div (slider) doit avoir un id.
			
			Les classes bg-1 à bg-3 permettent de changer le background pour chaque slide (on peut s'en passer)
			
			Les attributs suivants gèrent le effets :
				- data-orientation : "horizontal" ou "vertical" -> coupure du slide sur l'horizontale ou la verticale
				- data-slice1-rotation :
				- data-slice2-rotation : 
				- data-slice1-scale : 
				- data-slice2-scale : 
			 -->
			<div id="slider" class="sl-slider-wrapper">
			
				<div class="sl-slider">
				
					<div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
						<div class="sl-slide-inner">
							<div class="deco" data-icon=""></div>
							<h2>Bienvenue</h2>
							<blockquote><p>Vous pouvez effectuer sur ce site une recherche d'entreprise avec diverses possibilités...</p></blockquote>
						</div>
					</div>
					
					<div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
						<div class="sl-slide-inner">
							<div class="deco" data-icon=""></div>
							<h2>Localisation géographique</h2>
							<blockquote><p>Naviguez sur la carte pour trouver toutes nos entreprises référencées</p></blockquote>
						</div>
					</div>
					
					<div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
						<div class="sl-slide-inner">
							<div class="deco" data-icon=""></div>
							<h2>Filtres de recherche</h2>
							<blockquote><p>Vous pouvez rechercher une entreprise avec différents critères (nom, activité, forme juridique...)</p></blockquote>
						</div>
					</div>

					<div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
						<div class="sl-slide-inner">
							<div class="deco" data-icon=""></div>
							<h2>Représentation graphique</h2>
							<blockquote><p>Observez les interactions des entreprises avec les autres et les individus</p></blockquote>
						</div>
					</div>
					
					<div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
						<div class="sl-slide-inner">
							<div class="deco" data-icon=""></div>
							<h2>Dates clés</h2>
							<blockquote><p>Consultez toutes les dates clés des entreprises</p></blockquote>
						</div>
					</div>
				</div><!-- /sl-slider -->
				
				<nav id="nav-arrows" class="nav-arrows">
					<span class="nav-arrow-prev">Previous</span>
					<span class="nav-arrow-next">Next</span>
				</nav>
				
				<nav id="nav-dots" class="nav-dots">
					<span class="nav-dot-current"></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</nav>
				
			</div><!-- /slider-wrapper -->
			
		</div>

	</div>
	<!-- end: 1st Page - Accueil -->
	
	<!-- start: 2nd Page - Localisation géographique -->
	<div id="services" class="color black" style="height:1200px;">
		
		<!--start: Container -->
		<div class="container">

			<!--start: Wrapper -->
			<div class="wrapper span12">
				
				<!-- start: Page Title -->
				<div id="page-title">
					<div id="page-title-inner">
						<h2><span>Localisation Géographique</span></h2>
					</div>	
				</div>
				<!-- end: Page Title -->
			
				<!-- start: Row -->
				<div class="row-fluid">	
			
					<div id="hub" class="">
	
						<div class="nav_controls" id="map_controls">
							<button id="btn_content" class="btn btn-large btn-warning">Voir le formulaire</button>
						</div>
				
						<div class="nav_controls" id="content_controls">
							<button id="btn_map" class="btn btn-large btn-warning">Voir la carte</button>
						</div>
						
					</div>
				
					<section id="main">
						<div class=row-fluid>
							<div class="span4">
								<div class="alert alert-block" style="margin-top:50px;">
									<p>Vous pouvez choisir les entreprises qui s'affichent en remplissant les champs ci-contre :</p>
								</div>
							</div>
				
							<div class="span8">
								<div id="company_details_holder">
									<form class="form-horizontal well">
										<fieldset>
										<legend>Remplissez les critères de votre choix :</legend>
										<div class="control-group">
											<label class="control-label gris" for="carte_denomination">Dénomination</label>
												<div class="controls">
													<input type="text" id="carte_denomination" class="input-xlarge" value=""/>
												</div>
										</div>
										<div class="controleCodeNaf">
											<label class="control-label gris" for="carte_codenaf">Code Naf</label>
												<div class="controls">
													<input type="text" id="carte_codenaf" class="input-xlarge" value=""/>
												</div>
												<div class="alertCodeNaf alert-error hide">
													Le code Naf doit contenir 4 chiffres et une lettre
												</div>
										</div>
										<div class="control-group">
											<label class="control-label gris" for="carte_formeJuridique">Forme juridique</label>
											<div class="controls">
												<select id="carte_formeJuridique" class="input-xlarge">
													<option value="0">-- Choisir dans la liste --</option>
													<option value="SARL">SARL</option>
													<option value="SA">SA</option>
												</select>
											</div>
										</div>
										<div class="form-actions">
											<button type="submit" class="btn btn-primary" id="carte_filtrer">Filtrer</button>
											<button type="reset" class="btn" id="carte_annuler">Enlever tous les filtres</button>
										</div>
										</fieldset>
									</form>
								</div>
							</div>
						</div>
					</section>
					
					<div id="map_canvas" style="">map div</div>
			
				</div><!-- end: Row -->
			
			
			<div class="clearfix"></div>
			<hr class="clean">
			</div><!-- end: Wrapper -->
		
		</div>
		<!--end: Container -->
		
	</div>
	<!-- end: 2nd Page - Localisation géographique -->
	
	<!-- start: 3rd Page - Filtres de recherche -->
	<div id="pricing" class="color blue hauteurDiv" >
		
		<!--start: Container -->
		<div class="container">

			<!--start: Wrapper -->
			<div class="wrapper span12">

				<!-- start: Page Title -->
				<div id="page-title">
					<div id="page-title-inner">
						<h2><span>Filtres de recherche</span></h2>
					</div>
				</div>
				<!-- end: Page Title -->
				
				<div id="slideFiltre" class="sl-slider-wrapper"><!-- start: slideFormulaire -->
					<div class="sl-slider"><!-- start: classe sl-slider -->
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5"><!-- start: sl-slide bg-1 -->
							<div id="filtreCriteres" class="sl-slide-inner" style="height:400px;"><!-- start: formulaireCriteres -->
								<div class="deco" data-icon="?"></div>
								<form class="form-horizontal"><!-- start: form form-horizontal -->
									<fieldset>
									<legend>Remplissez un ou plusieurs critères </legend>
										<div class="control-group">
											<label class="control-label" for="denomination">Dénomination</label>
												<div class="controls">
													<input type="text" id="denomination" class="input-xlarge" value=""/>
												</div>
										</div>
										<div class="controleCodeNaf">
											<label class="control-label" for="codenaf">Code Naf</label>
												<div class="controls">
													<input type="text" id="codenaf" class="input-xlarge" value=""/>
												</div>
												<div class="alertCodeNaf alert-error hide">
													Le code Naf doit contenir 4 chiffres et une lettre
												</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="formeJuridique">Forme juridique</label>
											<div class="controls">
												<select id="formeJuridique" class="input-xlarge">
													<option value="0">-- Choisir dans la liste --</option>
													<option value="SARL">SARL</option>
													<option value="SA">SA</option>
												</select>
											</div>
										</div>
										<div style="width:10px; margin:auto;">
										<button id="boutonValiderFiltre" class="btn btn-info btn-small pull-right" type="submit">Valider</button>
										</div>
										<div class="control-group">
											<div class="alert alert-error hide">
												<h4 class="alert-heading">Erreur !</h4>
												Vous devez choisir au moins un filtre !
											</div>
										</div>
									</fieldset>
								</form><!-- end: form form-horizontal -->
							</div><!-- end: formulaireCriteres -->
						</div><!-- end: sl-slide bg-1 -->
						
						<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="0" data-slice2-rotation="0" data-slice1-scale="0" data-slice2-scale="0"><!-- start: sl-slide bg-2 -->
							<div id="filtreResultat" class="sl-slide-inner"><!-- start: resultat -->
								<span id="phraseResultat">Voici les résultats correpondants à votre recherche :</span>
								<span id="phrasePasResultat" style="display:none;">Auncune entreprise ne correpond à vos critères de recherche</span>
								<br/><br/>
								<table id="tableauResultat" class="table table-bordered table-striped">
									 <thead>
										<tr>
											<td>Dénomination de l'entreprise</td>
											<td>Code Naf</td>
											<td>Forme juridique</td>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
								<button id="boutonRetourFiltre" class="btn btn-info btn-small pull-right" type="submit">Changer les filtres</button>
							</div><!-- end: resultat -->
						</div>	
						
						<div class="sl-slide" data-orientation="horizontal"><!-- start: sl-slide bg-3 -->
							<div id="filtreDetail" class="sl-slide-inner"><!-- start: detail -->
								<span id="detailEntrepriseDenomination"></span>
								<br/><br/>
								<span id="detailEntrepriseNumero"></span>&nbsp;<span id="detailEntrepriseVoie"></span>&nbsp;<span id="detailEntrepriseLibelle"></span>
								<br/>
								<span id="detailEntrepriseCodePostal"></span>&nbsp;<span id="detailEntrepriseVille"></span>
								<br/><br/>
								Tél : <span id="detailEntrepriseTelephone"></span>
								<br/><br/>
								<button id="boutonRetourListe" class="btn btn-info btn-small pull-right" type="submit">Retour à la liste des résultats</button>
							</div><!-- end: detail -->
						</div>
						
					</div><!-- end: classe sl-slider -->
				</div><!-- start: slideFormulaire -->
			</div><!-- end: Wrapper -->
		</div><!--end: Container -->
		
		
	</div>
	<!-- end: 3rd Page - Filtres de recherche -->
	
	<!-- start: 4th Page - Portfolio -->
	<div id="portfolio" class="color white" style="height:40px;">
		
		<!--start: Container -->
		<div class="container">

			<!--start: Wrapper -->
			<div class="wrapper span12">
	
							<!-- start: Page Title -->
			<div id="page-title">
				<div id="page-title-inner">
					<h2><span>Représentation Graphique</span></h2>
				</div>	
			</div>
			<!-- end: Page Title -->
			
			<!-- start: Flexslider -->
			<div class="slider">
					<script>
					var width = 1250,
						height = 850;

					var color = d3.scale.category20();

					var force = d3.layout.force()
						.charge(-120)
						.linkDistance(30)
						.size([width, height]);

					var svg = d3.select("body").append("svg")
						.attr("width", width)
						.attr("height", height);

					d3.json("js/json/miserables.json", function(error, graph) {
					  force
						  .nodes(graph.nodes)
						  .links(graph.links)
						  .start();

					  var link = svg.selectAll(".link")
						  .data(graph.links)
						.enter().append("line")
						  .attr("class", "link")
						  .style("stroke-width", function(d) { return Math.sqrt(d.value); });

					  var node = svg.selectAll(".node")
						  .data(graph.nodes)
						.enter().append("circle")
						  .attr("class", "node")
						  .attr("r", 5)
						  .style("fill", function(d) { return color(d.group); })
						  .call(force.drag);

					  node.append("title")
						  .text(function(d) { return d.name; });

					  force.on("tick", function() {
						link.attr("x1", function(d) { return d.source.x; })
							.attr("y1", function(d) { return d.source.y; })
							.attr("x2", function(d) { return d.target.x; })
							.attr("y2", function(d) { return d.target.y; });

						node.attr("cx", function(d) { return d.x; })
							.attr("cy", function(d) { return d.y; });
					  });
					});
					</script>
				
			</div>
			<!-- end: Flexslider -->


			<!-- start: Portfolio -->
			<div id="portfolio-wrapper" class="row-fluid">
								
			

			</div>
			<!-- end: Portfolio -->
			</div>
			<!-- end: Wrapper -->
		
		</div>
		<!--end: Container -->
		
	</div>
	<!-- end: 4th Page - Portfolio -->
	
	<!-- start: 5th Page - About -->
	<div id="about" class="color yellow hauteurDiv">
		
		<!--start: Container -->
		<div class="container">

			<!--start: Wrapper -->
			<div class="wrapper span12">

							<!-- start: Page Title -->
			<div id="page-title">

				<div id="page-title-inner">

						<h2><span>About Us</span></h2>

				</div>	

			</div>
			<!-- end: Page Title -->				
		
			<!--start: Row -->
	    	<div class="row-fluid">
				
			</div>
			<!--end: Row -->
			
			<!-- start: Row -->
			<div class="row-fluid">		
				
			</div>
			<!--end: Row -->
			</div>
			<!-- end: Wrapper -->
		
		</div>
		<!--end: Container -->
		
	</div>
	<!-- end: 5th Page - About -->
	
	

	

	<footer>
		
		<div id="copyright">
			essentia &copy; 2013, <a href="http://clabs.co">creativeLabs</a>. Designed by <a href="http://bootstrapmaster.com" alt="Bootstrap Master - Bootstrap Theme">BootstrapMaster</a> in Poland <img src="img/poland.png" alt="Poland" style="margin-top:-4px">
		</div>
		<div id="social">
			<a href="http://facebook.com/BootstrapMaster" rel="tooltip" title="Facebook" class="facebook">Facebook</a>
			<a href="http://facebook.com/BootstrapMaster" rel="tooltip" title="Twitter" class="twitter">Twitter</a>
			<a href="http://BootstrapMaster.com/feed/" rel="tooltip" title="RSS" class="rss">RSS</a>
			<a href="#" rel="tooltip" title="Github" class="github">Github</a>
			<a href="#" rel="tooltip" title="LinkedIn" class="linkedin">LinkedIn</a>
			<a href="#" rel="tooltip" title="Pintrest" class="pintrest">Pintrest</a>
			<a href="#" rel="tooltip" title="Vimeo" class="vimeo">Vimeo</a>
			<a href="#" rel="tooltip" title="YouTube" class="youtube">YouTube</a>
		</div>	
		
	</footer>	

<!-- start: Java Script -->

<script type="text/javascript">	
	
</script>
<!-- end: Java Script -->

<!-- Placed at the end of the document so the pages load faster -->
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- jQuery doit être placé avant la carte google (qui appelle jQuery) -->
	
	<script type="text/javascript" src="js/librairies/isotope.js"></script> <!-- Permet de gérer des layouts, filtrage en fonction de critères, apparition dynamique -->
	<script type="text/javascript" src="js/librairies/jquery.imagesloaded.js"></script>

	<script type="text/javascript" src="js/librairies/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.imagesloaded.js"></script> <!-- Détecte quand des images sont chargées -->
	<script type="text/javascript" src="js/librairies/flexslider.js"></script>

	<script type="text/javascript" src="js/librairies/carousel.js"></script>
	<script type="text/javascript" src="js/librairies/fancybox.js"></script><!-- Gère des lightbox et des galeries d'images (effets d'apparition divers) -->

	<script type="text/javascript" src="js/librairies/twitter.js"></script>
	<script type="text/javascript" src="js/librairies/modernizr.custom.79639.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.ba-cond.min.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.slitslider.js"></script>
	
	<script type="text/javascript" src="js/librairies/excanvas.js"></script><!-- Canvas pour IE (s'adapte à ceci <!--[if lt IE 9]>		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->-->
	<script type="text/javascript" src="js/librairies/jquery.flot.min.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.flot.pie.min.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.flot.stack.js"></script>
	<script type="text/javascript" src="js/librairies/jquery.flot.resize.min.js"></script>
	
	<!-- Pour google maps -->
	<script src="js/librairies/jquery.gmap.min.js"></script>
	<!-- Fin de google map -->
	
	<script defer="defer" src="js/librairies/custom.js"></script> <!-- Gère les onglets, l'animation pour voyager haut/bas dans la page -->
	
	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Backbone -->
	<!-- Pour que les évenements fonctionnent, les script doivent être chargés à la fin -->
	<script type="text/javascript" src="js/librairies/underscore-min.js"></script>
	<script type="text/javascript" src="js/librairies/backbone-min.js"></script>
	<script type="text/javascript" src="js/librairies/backbone-localstorage.js"></script>
	
	<script type="text/javascript" src="app.js"></script>
	
	<script type="text/javascript" src="js/modules/vues/vueFiltreFormulaire.js"></script>
	<script type="text/javascript" src="js/modules/modeles/modeleEntreprise.js"></script>
	<script type="text/javascript" src="js/modules/routeurs/routeur.js"></script>
	<script type="text/javascript" src="js/outils.js"></script>
	
	<script src="js/modules/vues/vueCarteMarqueurs.js"></script>
	<script src="js/modules/vues/vueCarte.js"></script>
	
</body>
</html>